<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局容器</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.4.1/dist/css/bootstrap.css"/>
		<script src="js/jQuery3.6.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-3.4.1/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-3">
					<input type="text" name="" class="form-control">
					<input type="text" name="" class="form-control input-lg">
					<input type="text" name="" class="form-control input-sm">
				</div>
				<div class="col-sm-3">
				    <select class="form-control">
				        <option>北京</option>
				        <option>上海</option>
				        <option>深圳</option>
				    </select>
				    <select class="form-control" multiple="multiple">
				        <option>北京</option>
				        <option>上海</option>
				        <option>深圳</option>
				    </select>
				</div>
				<div class="col-sm-3">
				    <textarea class="form-control" rows="3"></textarea>
				</div>
				<div>
				    <div class="checkbox">
				        <label><input type="checkbox" >游戏</label>
				    </div>
				    <div class="checkbox">
				        <label><input type="checkbox" >学习</label>
				    </div>
				</div>
			</div>
			<div>
			    <label class="checkbox-inline">
			        <input type="checkbox" >游戏
			    </label>
			    <label class="checkbox-inline">
			        <input type="checkbox" >学习
			    </label>
			</div>
		</div>
		<!-- 垂直显示 -->
		<div>
		    <div class="radio">
		        <label><input type="radio" >男</label>
		    </div>
		    <div class="radio">
		        <label><input type="radio" >女</label>
		    </div>
		</div>
		<!-- 水平显示 -->
		<div>
		    <label class="radio-inline">
		        <input type="radio" >男
		    </label>
		    <label class="radio-inline">
		        <input type="radio" >女
		    </label>
		</div>
		<button class="btn btn-danger">按钮</button>
		<button class="btn btn-primary">按钮</button>
		<button class="btn btn-info">按钮</button>
		<button class="btn btn-success">按钮</button>
		<button class="btn btn-default">按钮</button>
		<button class="btn btn-warning">按钮</button>
		<button class="btn btn-link">按钮</button>
		<hr>
		<a href="##" class="btn btn-info">a标签按钮</a>
		<span class="btn btn-success">span标签按钮</span>
		<div class="btn btn-warning">div标签按钮</div>
		<!-- 按钮大小 -->
		<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button>
		<button class="btn btn-primary btn-sm">小型按钮.btn-sm</button>
		<button class="btn btn-primary">正常按钮</button>
		<button class="btn btn-primary btn-lg">大型按钮.btn-lg</button>
		<hr>
		<button class="btn btn-danger" disabled="disabled">禁用按钮</button>
		<button class="btn btn-danger disabled">禁用按钮</button>
		<hr>
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="email" class="control-label col-sm-2">邮箱</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" placeholder="请输入邮箱"/>
				</div>
			</div>
			<div class="form-group">
				<label for="pwd" class="control-label col-sm-2">密码</label>
				<div class="col-sm-10">
					<input type="pwd" class="form-control" placeholder="请输入密码" />
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2">
					<div class=" checkbox">
						<label>
							<input type="checkbox" />记住密码
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-default">提交</button>
				</div>
			</div>
		</form>
		<hr>
		<form class="form-inline">
			<div class="form-group">
				<label for="email" >邮箱</label>
				<input type="email" class="form-control" placeholder="请输入邮箱"/>
			</div>
			<div class="form-group">
				<label for="pwd" >密码</label>
					<input type="pwd" class="form-control" placeholder="请输入密码" />
			</div>
			<div class="form-group checkbox">
				<label><input type="checkbox" />记住密码</label>
			</div>
			<div class="form-group">
				<button class="btn btn-default">提交</button>
			</div>
		</form>
	</body>
</html>
